<div class="box altbox">
    <div class="boxin">
        <div class="header">
            <h1>My Tickets - <span id="folderName">Inbox</span></h1>
        </div>
        <div class="page">
            <table width="99%" id="ticketTable">
                <tr>
                    <td style="vertical-align: top" class="resizeCell" width="223px">
                        <div id="folderList">
                            
                        </div>
                        <div id="folderActions">
                            <ul>
                                <li><a class="button altbutton" href="#" id="newFolderButton" title="Add new folder"><img class="icon16" src="/images/led-ico/add.png" style="padding-left: 6px;" /></a></li>
                                <li><a class="button altbutton" href="#" id="deleteFolderButton" title="Delete folder"><img class="icon16" src="/images/led-ico/bin_closed.png" style="padding-left: 6px;" /></a></li>
                                <li><a class="button altbutton" href="#" id="editFolderButton" title="Edit folder"><img class="icon16" src="/images/led-ico/application_edit.png" style="padding-left: 6px;" /></a></li>
                            </ul>
                        </div>
                    </td>
                    <td>
                        <?= $this->partial('partials/message-list.phtml', array('permalink' => 'permalink', 'title' => 'Title')); ?>
                    </td>
                </tr>
            </table>
            
            <div style="clear: both;"></div>
        </div>
    </div>
    <input type="hidden" id="folderId" />
</div>

<?php echo $this->dialogContainer(
    'newFolderModal',
    '<div id="newFolderContent"></div>',
    array(
        'autoOpen'      => false,
        'draggable'     => true,
        'modal'         => true,
        'resizable'     => false,
        'title'         => 'New Folder',
        'closeOnEscape' => false,
        //'width'			=> '800px',
        'position'		=> 'middle',
        'buttons'       => array(
            'Create'	=> new Zend_Json_Expr('function() {
            	$("#folder").val($("#folderId").val());
            	
            	$.ajax({  
                    type: "POST",  
                    dataType: "json",
                    url: "/backoffice/helpdesk/new-folder",  
                    data: $("#newFolderForm").serialize(),  
                    success: function(res) {
                    	if(res.success)
                    	{
                    		$("#folderList").load("/backoffice/helpdesk/list-folders");
                    		$("#newFolderModal").dialog(\'close\');
                    	}
                    }  
                });  
            }'),
            'Cancel'    => new Zend_Json_Expr('function() {
                $(this).dialog(\'close\');
            }')
        )
    )
); 
?>

<?php echo $this->dialogContainer(
    'deleteFolderModal',
    '<table>
		<tr>
			<td style="vertical-align: middle; padding-right: 10px;"><img src="/images/fff/error.png" /></td>
			<td>
				Are you sure you wish to remove this folder?<br />
				All messages in this folder will be placed in your inbox
			</td>
		</tr>
	</table>',
    array(
        'autoOpen'      => false,
        'draggable'     => false,
        'modal'         => true,
        'resizable'     => false,
        'title'         => 'Delete Folder',
        'closeOnEscape' => false,
        'position'		=> 'middle',
        'buttons'       => array(
            'Delete'	=> new Zend_Json_Expr('function() {
            	if($("#folderId").val() == 0)
            	{
            		alert("You cannot delete the Inbox");
            		return false;
        		}
            		
            	$.ajax({  
                    type: "POST",  
                    dataType: "json",
                    url: "/backoffice/helpdesk/delete",  
                    data: "folder="+$("#folderId").val(),  
                    success: function(res) {
                    	if(res.success)
                    	{
                    		$("#folderList").load("/backoffice/helpdesk/list-folders");
                    		$("#deleteFolderModal").dialog(\'close\');
                    	}
                    }  
                });  
            }'),
            'Cancel'    => new Zend_Json_Expr('function() {
                $(this).dialog(\'close\');
            }')
        )
    )
); 
?>

<script>
	var windowHeight = $(window).height();
    var barSubtraction = 240;

    $(document).ready(function() {
        var folderListHeight = windowHeight - barSubtraction - 50;
        var messageContainerHeight = windowHeight - barSubtraction - 40;
        var ticketTableHeight = windowHeight - barSubtraction;

		$("#ticketTable").attr('height', ticketTableHeight);
		$("#folderList").height(folderListHeight);
		$("#messageContainer").height(messageContainerHeight);

		$("#folderList").load('/backoffice/helpdesk/list-folders');
		listFolderTickets(0, false);
    });

    $("#newFolderButton").click(function() {
        if($("#folderId").val() == '')
        {
            alert("Please select a folder first");
            return false;
        }
        
		$("#newFolderContent").load('/backoffice/helpdesk/new-folder');
		$("#newFolderModal").dialog('open');
    });

    $("#deleteFolderButton").click(function(){
		$("#deleteFolderModal").dialog('open');
    });

    $("#ticketTable").columnSizing({
        selectCells: 'td.resizeCell',
        tableWidthFixed: true,
		viewResize: true, 
		viewGhost: false,
        cookies: false,
		cssHandler: {
		    position: "relative",
		    right:"-3px",
		    top: (windowHeight / 2) - (barSubtraction / 2) - 10,
		    float:"right",
		    height:"20px",
		    cursor:"col-resize",
		    borderRight:"2px solid #fff",
		    borderLeft:"2px solid #ccc"
		}
	});
	
    function listFolderTickets(folderId, append)
    {
		$.getJSON('/backoffice/helpdesk/folder-listing/folder/'+folderId, function(json) {
		    var row;

			if(json != null)
			{
    			$.each(json, function(i, ticket) {
    				row += "<tr class='ticketRow' ref='"+ticket.id+"'>";
    				row += "<td>"+ticket.from+"</td>";
    				row += "<td>"+ticket.subject+"</td>";
    				row += "<td>"+ticket.date+"</td>";
    
    				if(ticket.attachment == true)
    					row += "<td><img src=\"/images/led-ico/attach.png\" title=\"Attachment\" alt=\"Attachment\" /></td>";
    				else
    					row += "<td>&nbsp;</td>";
    
    				row += "</tr>";
    			});

    			if(append == true)
    			{
        			if($("div.content table tbody tr:first").length)
        				$(row).insertBefore("div.content table tbody tr:first");
        			else
        				$("div.content table tbody").append(row);
    			}
    			else
    			{
    				$("div.content table tbody").html(row);
    			}

			}
			else
			{
			    $("div.content table tbody").html('');
			}
		});
    }
</script>



